<template>
	<div class="hot">
		<div class="top">
			<div class="left">
				<img src="/api/data/img/hot/hot1.png" alt="">
				<span>本周热门榜单</span>
			</div>
			<div class="right">
				<span>全部榜单</span>
				<i class="iconfont">&#xe62e;</i>
			</div>
		</div>
		<div class="content">
			<div v-for="item of hotList">
				<div class="img" @click="godetails">
					<img :src="item.url" alt="">
					<div v-if="item.hot" class="hottop">
						<img :src="item.hot" alt="">
					</div>
				</div>
				<h5>{{item.title}}</h5>
				<p><span>￥{{item.money}}</span>起</p>
			</div>
		</div>
	</div>
</template>
<script>
	 export default{
	 	props:["hotList"],
	 	methods:{
	 		godetails(){
	 			this.$router.push("/details")
	 		}
	 	}
	 	// data(){
	 	// 	return{
	 	// 		// hotList:[
 		// 		// 	{
 		// 		// 		id:"01",
 		// 		// 		url:require("@/assets/img/hot/01.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108",
 		// 		// 		hot:require("@/assets/img/hot/top1.png")
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"02",
 		// 		// 		url:require("@/assets/img/hot/02.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108",
 		// 		// 		hot:require("@/assets/img/hot/top2.png")
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"03",
 		// 		// 		url:require("@/assets/img/hot/03.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108",
 		// 		// 		hot:require("@/assets/img/hot/top3.png")
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"04",
 		// 		// 		url:require("@/assets/img/hot/05.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108"
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"05",
 		// 		// 		url:require("@/assets/img/hot/06.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108"
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"06",
 		// 		// 		url:require("@/assets/img/hot/07.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108"
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"07",
 		// 		// 		url:require("@/assets/img/hot/08.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108"
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"08",
 		// 		// 		url:require("@/assets/img/hot/09.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108"
 		// 		// 	},
 		// 		// 	{
 		// 		// 		id:"09",
 		// 		// 		url:require("@/assets/img/hot/10.jpg"),
 		// 		// 		title:"华清宫",
 		// 		// 		money:"108"
 		// 		// 	}
	 	// 		// ]
	 	// 	}
	 	// }
	 } 
</script>
<style scoped>
	.hot{
		border-top:0.2rem solid #ddd;
		border-bottom:0.2rem solid #ddd;
	}
	.top{
		display: flex;
		font-size: 0.32rem;
	}
	.left,.right{
		width: 100%;
		padding:0 0.2rem;
		line-height: 0.82rem;
	}
	.left{
		vertical-align:top;
	}
	.left img{
		display: inline-block;
	    overflow: hidden;
	    width: .3rem;
	    height: .3rem;
	    margin-left: .2rem;
	    margin-top: 0.3rem;
	    vertical-align: top;
	}
	.right{
		text-align: right;
		font-size: 0.24rem;
	}
	.content{
		width: 100%;
		padding:0 0.1rem;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		box-sizing: border-box;
	}
	.content div{
		display: inline-block;
		overflow: hidden;
		padding: 0 0.03rem;
	}
	.content  .img{
		width: 2rem;
		height: 100%;
		position: relative;
	}
	.content  .img img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.content  .img .hottop{
		position: absolute;
		top:0;
		left:0;
		width: 0.8rem;
		height: 0.4rem;
	}
	.content h5{
		margin-top: .12rem;
    color: #212121;
    font-size: .24rem;
    line-height: .32rem;
    text-align: center;
	}
	.content  p{
		    color: #616161;
    font-size: .24rem;
    line-height: .36rem;
    text-align: center;
	}
	.content p span{
		color:#ff8300;;
	}
</style>